<template>
  <div class="dashboard-home">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <h1>Welcome back, <span class="highlight">{{ account.displayName  }}</span></h1>
      <p>Manage your Minecraft account and assets</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <h2><i class="mdi mdi-flash"></i> Quick Actions</h2>
      <div class="stats-container">
        <div class="stats-grid">
          <div class="stats-card">
            <div class="stats-header">
              <i class="mdi mdi-account-group"></i>
              <h3>Characters</h3>
            </div>
            <div class="stats-value">3</div>
            <router-link to="/characters" class="stats-link">
              View all <i class="mdi mdi-chevron-right"></i>
            </router-link>
          </div>

          <div class="stats-card">
            <div class="stats-header">
              <i class="mdi mdi-tshirt-crew"></i>
              <h3>Skins</h3>
            </div>
            <div class="stats-value">5</div>
            <router-link to="/skins" class="stats-link">
              Manage skins <i class="mdi mdi-chevron-right"></i>
            </router-link>
          </div>

          <div class="stats-card">
            <div class="stats-header">
              <i class="mdi mdi-shield-lock"></i>
              <h3>Security</h3>
            </div>
            <div class="stats-value">High</div>
            <router-link to="/security" class="stats-link">
              Check status <i class="mdi mdi-chevron-right"></i>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近活动 -->
    <div class="activity-section">
      <h2><i class="mdi mdi-history"></i> Recent Activity</h2>
      <div class="activity-list">
        <div v-for="activity in activities" :key="activity.id"  class="activity-item">
          <div class="activity-icon" :style="{ color: activity.color  }">
            <i class="mdi" :class="activity.icon"></i>
          </div>
          <div class="activity-content">
            <p class="activity-title">{{ activity.title  }}</p>
            <p class="activity-time">{{ activity.time  }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const account = ref({
  username: '0xSteve42',
  displayName: '0xSteve42'
})

const activities = ref([
  {
    id: 1,
    title: 'Uploaded new skin "Nether Warrior"',
    time: '2 hours ago',
    icon: 'mdi-cloud-upload',
    color: '#4e7de4'
  },
  {
    id: 2,
    title: 'Created new character "EndExplorer"',
    time: 'Yesterday',
    icon: 'mdi-account-plus',
    color: '#10b981'
  },
  {
    id: 3,
    title: 'Updated security settings',
    time: '3 days ago',
    icon: 'mdi-shield-check',
    color: '#f59e0b'
  }
])
</script>

<style scoped>
.dashboard-home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 48px;
}

.welcome-section h1 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 12px;
}

.welcome-section p {
  font-size: 16px;
  color: var(--text-secondary);
}

.highlight {
  color: var(--accent);
}

.stats-section {
  margin-bottom: 48px;
}

.stats-section h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 32px;
  color: var(--text-primary);
}

.stats-section h2 i {
  margin-right: 12px;
  color: var(--accent);
}

.stats-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
  gap: 24px;
  width: fit-content;
  max-width: 100%;
}

.stats-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.2s;
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stats-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.stats-header i {
  font-size: 24px;
  margin-right: 12px;
  color: var(--accent);
}

.stats-header h3 {
  font-size: 16px;
  font-weight: 500;
}

.stats-value {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 16px;
}

.stats-link {
  display: flex;
  align-items: center;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}

.stats-link i {
  margin-left: 4px;
}

.activity-section {
  margin-bottom: 32px;
}

.activity-section h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 32px;
  color: var(--text-primary);
}

.activity-section h2 i {
  margin-right: 12px;
  color: var(--accent);
}

.activity-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
  transition: all 0.2s;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.activity-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.activity-icon i {
  font-size: 20px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .dashboard-home {
    padding: 24px;
  }

  .welcome-section h1 {
    font-size: 28px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .stats-section h2,
  .activity-section h2 {
    justify-content: flex-start;
  }

  .activity-list {
    max-width: 100%;
  }
}
</style>